<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <base href="<%=basePath%>" />
    <title>User Management</title>
    <script type="text/javascript">
		var path = "<%=basePath%>";
	</script>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>basic/css/content.css" />
	<script type="text/javascript" src="<%=basePath%>resources/datepicker/datepicker.js"></script>
	<!-- 页面特效 -->
	<jsp:include page="/beshs/res-refer/page-effect-reference.jsp" />
	<!-- 系统通用资源 -->
	<jsp:include page="/resources/resource-refer/common-resource-reference.jsp" />
	<!-- 表单校验 -->
	<jsp:include page="/resources/resource-refer/component-validform-reference.jsp" />
	<!-- 用户访问菜单路径 -->
	<jsp:include page="/resources/usertrace/common-uservisit-reference.jsp" />
  </head>
  <script type="text/javascript">
  	function submitForm() {
  		var userUID = "<s:property value='userUID' />";
  		//表单信息
  		var userID = $("input[name='userID']").val();
  		var pid = $("input[name='pid']").val();
  		var password = $("input[name='password']").val();
  		var rePassword = $("input[name='rePassword']").val();
  		var userName = $("input[name='userName']").val();
  		var gender = $("select[name='user.gender']").val();
  		var birthday = $("input[name='birthday']").val();
  		var phone = $("input[name='phone']").val();
  		var email = $("input[name='email']").val();
  		var address = $("textarea[name='address']").val();
  		var status = $("select[name='user.status']").val();
  		var orderID = $("input[name='orderID']").val();
  		var roomId = $("select[name='roomId']").val();
  		$.getJSON(path+"basic/userActionJson!saveOrUpdateUser.do?date="+new Date(), {
  			"user.id": userUID,
  			"user.userID": userID,
  			"user.pid": pid,
  			"user.password": password,
  			rePassword: rePassword,
  			"user.userName": userName,
  			"user.gender": gender,
  			"user.birthday": birthday,
  			"user.phone": phone,
  			"user.email": email,
  			"user.address": $.trim(address),
  			"user.status": status,
  			"user.orderID": orderID,
  			"user.roomId": roomId
  		}, function(data){
  			if(data.success) {
  				Dialog.alert("Successful Operation！", function() {
  					var index = parent.layer.getFrameIndex(window.name)
					parent.window.frames["c_content_content"].location = path + "basic/userAction!queryUserPage.do?date"+new Date();
  					parent.layer.close(index);
  				});
  			} else {
  				Dialog.alert(data.msg);
  			}
  		});
  	}
  	
  	$(function(){
		$("form[name='userForm']").Validform({
			btnSubmit: "input[name='submit']",
			btnReset: "input[name='reset']",
			tiptype: function(msg, o, cssctl){
				//msg：提示信息;
				//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
				//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
				if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
					var objtip=o.obj.siblings(".Validform_checktip");
					cssctl(objtip,o.type);
					objtip.text(msg);
				} else {
					var objtip=o.obj.find("#msgdemo");
					cssctl(objtip,o.type);
					objtip.text(msg);
				}
			},
			postonce: true, //开启二次提交防御，在数据成功提交后，表单将不能再继续提交
			showAllError: true, //提交表单时所有错误提示信息都会显示
			ajaxPost:true,
			beforeSubmit: function(curform) { //在验证成功后，表单提交前执行的函数，curform参数是当前表单对象
				submitForm();
				return true; //这里明确return false的话表单将不会提交
			}
		});
  	});
  </script>
  <body>
    <div class="content_all">
  		<!--导航条-->
  		<div class="insertinfo_table">
      		<form action="<%=basePath%>basic/userActionJson!saveOrUpdateUser.do" name="userForm"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        		<tr>
          			<th>User Name：</th>
          			<td><input name="userID" type="text" class="s_input" value="<s:property value='user.userID' />" 
          				ajaxurl="<%=basePath%>basic/formAsyncValidateActionJson!validUserIDUnique.do?entityUuid=<s:property value='user.id' />" 
          				datatype="/^[\-0-9a-zA-Z\u4e00-\u9fa5]{2,64}$/" sucmsg="User Name Verification Passed！" nullmsg="Please enter user name！" errormsg="User Name only can be composed of letters,numbers and dashes within 2~64 characters！" />
            			&nbsp;<span style="color:#FF0000;">*</span>
            			<div class="Validform_checktip">User Name only can be composed of letters,numbers and dashes within 2~64 characters！</div></td>
            		<th>ID Number：</th>
          			<td><input name="pid" type="text" class="s_input" value="<s:property value='user.pid' />" 
          				datatype="/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/" ignore="ignore" errormsg="Please enter id number in correct format！"/>
          				<div class="Validform_checktip"></div></td>
        		</tr>
        		<tr>
          			<th>Password：</th>
          			<td><input name="password" type="password" class="s_input" 
          				datatype="s6-15" nullmsg="Please enter password！" errormsg="Password length between 6~15!"/>
            			&nbsp;<span style="color:#FF0000;">*</span>
            			<div class="Validform_checktip">Password length between 6~15!</div></td>
            		<th>Repeat Password：</th>
          			<td><input name="rePassword" type="password" class="s_input" 
          				datatype="*" recheck="password" nullmsg="Please enter password again！" errormsg="The password dont match！"/>
            			&nbsp;<span style="color:#FF0000;">*</span>
            			<div class="Validform_checktip">The password dont match！</div></td>
        		</tr>
        		<tr>
          			<th>Real Name：</th>
          			<td><input name="userName" type="text" class="s_input" value="<s:property value='user.userName' />" 
          				datatype="/^[\-0-9a-zA-Z\u4e00-\u9fa5]{2,64}$/" ignore="ignore" errormsg="Real name only can be composed of letters,numbers and dashes within 2~64 characters！" />
          				<div class="Validform_checktip"></div></td>
          			<th>Gender：</th>
          			<td>
          				<s:select name="user.gender" list="#{'male':'male', 'female':'female' }" headerKey="" headerValue="" cssClass="s_sel" ></s:select>
          			</td>
        		</tr>
        		<tr>
        			<th>Date of Birth：</th>
          			<td>
          				<input id="user_birthday" name="birthday" class="Wdate" value="<s:date name='user.birthday' format='yyyy-MM-dd' nice='false' />" errormsg="Please enter date and time in correct format such as-- 2014-07-19！" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" />
          			
<%--           				<input name="birthday" id="user_birthday" type="text" class="s_input" value="<s:date name='user.birthday' format='yyyy-MM-dd' nice='false' />" onclick="selectDate(this,'yyyy-MM-dd')"  --%>
<!--           				datatype="/^(\d{4})-(\d{1,2})-(\d{1,2})$/" ignore="ignore" errormsg="Please enter date and time in correct format such as-- 2014-07-19！" readonly/> -->
<%--           				<img src="<%=basePath%>resources/datepicker/calendar.jpg" onclick="txtSelectDate('user_birthday','yyyy-MM-dd')"/> --%>
          				<div class="Validform_checktip"></div></td>
          			<th>Phone Number：</th>
          			<td><input name="phone" type="text" class="s_input" value="<s:property value='user.phone' />" 
          				datatype="/^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/" ignore="ignore" errormsg="Please enter phone number in correct format！" />
          				<div class="Validform_checktip"></div></td>
        		</tr>
        		<tr>
        			<th>E-mail：</th>
          			<td><input name="email" type="text" class="s_input" value="<s:property value='user.email' />" 
          				datatype="/^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/" ignore="ignore" errormsg="Please enter e-mail in correct format！"/>
          				<div class="Validform_checktip"></div></td>
          			<th>Contact Address：</th>
          			<td><textarea name="address" cols="35" rows="3" 
          				datatype="*1-100" ignore="ignore" errormsg="请填写有效内容，控制在1-100个字符！" tip="Please enter contact address！" altercss="gray">
          					<s:property value='user.address' />
          				</textarea><div class="Validform_checktip"></div></td>
        		</tr>
        		<tr>
        			<th>State：</th>
          			<td>
          				<s:select name="user.status" list="#{'1':'Yes', '0':'No' }" cssClass="s_sel" ></s:select>
          			</td>
          			<th>Display Sequence：</th>
          			<td><input name="orderID" type="text" class="s_input" value="<s:property value='user.orderID' />" 
          				datatype="n1-10" errormsg="请填写1到10位有效数字！" ignore="ignore" />
          				<div class="Validform_checktip"></div></td>
        		</tr>
        		<tr>
        			<th>Project：</th>
          			<td>
          				<s:select name="projectID" list="projectList" listKey="id" listValue="projectName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
          			</td>
          			<th>District：</th>
          			<td>
	          			<script type="text/javascript">
	          				function reloadCommunitys(projectUID, communityUID) {
								$("select[name='communityID']").children("option").slice(1).remove();
								if(projectUID!=null && projectUID!="") {
									$.getJSON(path+"beshs/communityActionJson!queryCommunitysByBelongs.do?date="+new Date(), {
										projectUID: projectUID
									}, function(data){
										for(var index=0; index<data.length; index++) {
											if(communityUID!=null && communityUID!="" && communityUID==data[index].id) {
												$("select[name='communityID']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].communityName+"</option>");
											} else {
												$("select[name='communityID']").append("<option value='"+data[index].id+"'>"+data[index].communityName+"</option>");
											}
										}
									});
								}
							}
							
							$(function() {
								$("select[name='projectID']").change(function(){
									var projectUID = $(this).val();
									var communityUID = $("select[name='communityID']").val();
									reloadCommunitys(projectUID, communityUID);
								});
							});
	          			</script>
          				<s:select name="communityID" list="communityList" listKey="id" listValue="communityName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
            		</td>
        		</tr>
        		<tr>
        			<th>Building：</th>
          			<td>
          				<script type="text/javascript">
          					function reloadBuildings(projectUID, communityUID) {
								$("select[name='buildingId']").children("option").slice(1).remove();
								if(projectUID!=null && projectUID!="") {
									$.getJSON(path+"beshs/buildingActionJson!queryBuildingsByBelongs.do?date="+new Date(), {
										projectUID: projectUID,
										communityUID: communityUID
									}, function(data){
										for(var index=0; index<data.length; index++) {
											if(communityUID!=null && communityUID!="" && communityUID==data[index].id) {
												$("select[name='buildingId']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].buildingID+"</option>");
											} else {
												$("select[name='buildingId']").append("<option value='"+data[index].id+"'>"+data[index].buildingID+"</option>");
											}
										}
									});
								}
							}
							
							$(function() {
								$("select[name='communityID']").change(function(){
									var communityUID = $(this).val();
									var projectUID = $("select[name='projectID']").val();
									reloadBuildings(projectUID, communityUID);
								});
							});
          				</script>
          				<s:select name="buildingId" list="buildingList" listKey="id" listValue="buildingName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
          			</td>
          			<th>Apartment Number：</th>
          			<td>
          				<script type="text/javascript">
          					function reloadRooms(projectUID, communityUID, buildingId) {
								$("select[name='roomId']").children("option").slice(1).remove();
								if(projectUID!=null && projectUID!="") {
									$.getJSON(path+"beshs/heatRoomActionJson!queryHeatRoomsByBelongs.do?date="+new Date(), {
										projectUID: projectUID,
										communityUID: communityUID,
										buildingUID: buildingId
									}, function(data){
										for(var index=0; index<data.length; index++) {
											if(communityUID!=null && communityUID!="" && communityUID==data[index].id) {
													$("select[name='roomId']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].houseNo+"</option>");
												} else {
													$("select[name='roomId']").append("<option value='"+data[index].id+"'>"+data[index].houseNo+"</option>");
												}
										}
									});
								}
							}
							
							$(function() {
								$("select[name='buildingId']").change(function(){
									var buildingID = $(this).val();
									var communityUID = $("select[name='communityID']").val();
									var projectUID = $("select[name='projectID']").val();
									reloadRooms(projectUID, communityUID, buildingID);
								});
							});
          				</script>
          				<s:select name="roomId" list="roomList" listKey="id" listValue="houseNo" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
            		</td>
        		</tr>
        		<tr>
          			<td style="border:none;" colspan="4" align="center">
          				<input name="submit" type="button" value="Submit" class="s_btn" />
            			<input name="reset" type="reset" value="Reset" class="s_btn"/></td>
        		</tr>
      		</table></form>
  		</div>
	</div>
	<div class="clear"></div>
  </body>
</html>
